<template>
	<div class="">
		<div class="goBackButtonBox">
			<div @click="handleClosed" class="item cursor-pointer el-icon-arrow-left font24"></div>
		</div>
		<div class="contentBox">
			<div class="">
				<template v-if="stateData">
					<div class="item">
						<div class="shs-flex shs-flex-start position-relative">
							<el-image class="userUrl" :src="stateData.fromUrl+'?w=200&h=200&q=75'" fit="fill">
								<div slot="error" class="image-slot">
									<el-image class="userUrl"
										:src="$handledImageError(stateData.fromUrl+'?w=200&h=200&q=75','tx')"
										fit="fill">
									</el-image>
								</div>
							</el-image>

							<div class="stateBox">
								<div class="headerBox marginL5">
									<div class="color-smill overflow ">{{stateData.fromUsername}}</div>
									<el-tag class="color-smill" v-if="stateData.status==1" type='warning'>通过</el-tag>
									<el-tag class="color-smill" v-else-if="stateData.status==0" type='info'>封禁</el-tag>
									<el-tag class="color-smill" v-else-if="stateData.status==3"
										type='warning'>待审核</el-tag>
									<el-tag class="color-smill" v-else-if="stateData.status==4"
										type='danger'>未通过</el-tag>
									<el-tag class="color-smill" v-else type='danger'>异常</el-tag>
									<!-- <template v-if="handleIsAlike() || handleIsAlikeAdmin()">
										<el-dropdown trigger="click" @command="handledStateMenu">
											<div class="font20">
												<i class="el-icon-more-outline  textCenter" style="width: 50px;"></i>
											</div>
											<el-dropdown-menu slot="dropdown">
												<el-dropdown-item icon="el-icon-edit" command='edit'
													v-if="handleIsAlike()"></el-dropdown-item>
												<el-dropdown-item icon="iconfont icon-fengjin" command='banned'
													v-if="handleIsAlikeAdmin()"></el-dropdown-item>
												<el-dropdown-item icon="el-icon-delete"
													command='del'></el-dropdown-item>
											</el-dropdown-menu>
										</el-dropdown>
									</template> -->
								</div>
								<div class="marginL5 stateContent">{{stateData.content}}</div>
							</div>
						</div>
						<div class="stateImagesBox" v-viewer="{url: 'data-src' }">
							<template v-for="(imagesItem,index) in stateData.images">
								<div class="stateImages" :key="imagesItem.uniqueID">
									<video-play v-if="imagesItem.type=='video/mp4'" :imagesItem='imagesItem' ></video-play>
									<img v-else :src="`${imagesItem.path}?w=780&h=500&q=75`" style="object-fit: cover;"
										:data-src="imagesItem.path" class="images-item" />
								</div>
							</template>
						</div>
						<div class="color-smill font12 marginT5 marginB5">
							<span>[{{stateData.VisibilityLabel}}] </span><span>{{stateData.createTime}}</span>
						</div>
						<div class="statetags">
							<el-tag v-for="tagItem,tagindex in stateData.tags" class="state-tag" :key="tagItem.key"
								:disable-transitions="false">{{tagItem.lable}}</el-tag>
						</div>
						<div class="shs-like" @click="handledLike(stateData)">
							<el-statistic :value="computedLike(stateData)" title="">
								<template slot="suffix">
									<span>
										<i class="iconfont icon-xihuancopy" style="color:red"
											v-show="!!stateData.islike"></i>
										<i class="iconfont icon-xihuancopy" v-show="!stateData.islike"></i>
									</span>
								</template>
							</el-statistic>
						</div>
					</div>

				</template>
				<div class="editBox" v-if="upDialogVisible">
					<el-dialog title="修改权限" :visible.sync="upDialogVisible" width="50%" center :modal="false">
						<div class="textCenter">
							<el-select v-model="Visibility" placeholder="可见范围" size="small"
								style="width: 150px;margin: 10px 0;">
								<el-option v-for="item in Visibilitys" :key="uniqueE(8,16)" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button class="boderr18" @click="upDialogVisible=false">取 消</el-button>
							<el-button class="boderr18" type="primary" @click="handledEdit">确 定</el-button>
						</span>
					</el-dialog>
				</div>
				<div class="editBox" v-if="fjDialogVisible">
					<el-dialog title="封禁作品" :visible.sync="fjDialogVisible" width="50%" center :modal="false">
						<div class="textCenter">
							<el-input name="remark" type="text" v-model="itemForm.remark" autocomplete="on"
								placeholder="输入操作备注" maxlength='80'>
							</el-input>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button class="boderr18" @click="fjDialogVisible=false">取 消</el-button>
							<el-button class="boderr18" type="primary" @click="handleControls">确 定</el-button>
						</span>
					</el-dialog>
				</div>
				<div class="editBox" v-if="delDialogVisible">
					<el-dialog title="提示" :visible.sync="delDialogVisible" width="50%" center :modal="false">
						<div class="textCenter">确认要删除该动态？</div>
						<span slot="footer" class="dialog-footer">
							<el-button class="boderr18" @click="delDialogVisible=false">取 消</el-button>
							<el-button class="boderr18" type="primary" @click="handledDelete">确 定</el-button>
						</span>
					</el-dialog>
				</div>
			</div>
			<!-- status 状态 1启用0禁用 3待审核4未通过 -->
			<div class="bottomBox">
				<div class="showAuthor cursorPointer" @click="handleOpenDetails(stateData.fromId)">查看作者信息</div>
				<div class="examine cursorPointer" v-show="stateData.status==3" @click="handledPass(1)">通过</div>
				<div class="examine cursorPointer" v-show="stateData.status==0 || stateData.status==4"
					@click="handledPass(1)">恢复</div>
				<div class="examine cursorPointer" v-show="stateData.status==3 ||stateData.status==1"
					@click="handledPass(4)">拒绝</div>
			</div>
			<div class="sensitiveState cursorPointer" @click="openUrl('sensitiveWords')">
				<div>违规词检测</div>
			</div>
			<relationship-add ref="relationshipAddMobile"></relationship-add>
			<sensitive-words ref='sensitiveWordsMoblie'></sensitive-words>
		</div>
	</div>
</template>

<script>
	import {
		imageNowIP
	} from "@/utils/config"
	import {
		getStateList,
		Statelike,
		StateUnlike,
		getStateAuditshow,
		Statedel,
		StateEdit,
		setAudit,
		bannedState
	} from "@/api/state"
	import {
		throttle,
		debounce,
		uniqueE
	} from "@/utils/common"
	import {
		formatTime
	} from "@/utils/base"
	import relationshipAdd from "@/components/relationship/index"
	import sensitiveWords from "@/views/mobile/components/users/audit/sensitiveWords"
	import VideoPlay from "@/components/VideoPlay"
	export default {
		name: "MobileStateShowpage",
		components: {
			relationshipAdd,
			sensitiveWords,
			VideoPlay
		},
		props: {

		},
		data() {
			return {
				imageNowIP,
				stateData: {}, //数据 status 状态 1启用0禁用 3待审核4未通过
				isControls: false, //是否有操作更新或删除 y刷新index页面
				upDialogVisible: false, //修改权限的弹窗
				delDialogVisible: false, //删除的弹窗
				fjDialogVisible: false, //封禁作品弹窗
				Visibility: 1,
				Visibilitys: [{
					value: 1,
					label: "全部可见"
				}, {
					value: 2,
					label: "好友可见"
				}, {
					value: 3,
					label: "私密"
				}],
				VisibilitysHuixian: ["全部可见", "好友可见", "私密"],
				imagesItemPreviewList: [], //预览列表
				//封禁操作
				itemForm: {
					bannedId: "",
					remark: "",
					status: 0
				},

			}
		},
		mounted() {
			if (this.$route.params.code) {
				this.stateId = this.$route.params.code
				this.selectValue = this.$route.params.selectValue
				this.itemForm.bannedId = this.stateId
				this.initdata()
			} else {
				this.$router.push("audit")
			}

		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo
			},

		},
		destroyed() {
			console.log("销毁后show");
		},
		methods: {
			openUrl(contentText) {
				this.$refs['sensitiveWordsMoblie'].initData({
					contentText: this.stateData.content,
					code: this.stateId,
					selectValue: this.selectValue
				})
			},
			uniqueE,
			/**操作封禁
			 */
			handleControls: debounce(function() {
				try {
					if (this.itemForm.bannedId == 1) {
						this.$message({
							message: "倒反天罡[管理员你也禁呀]",
							type: 'warning'
						});
						return;
					}
					if (!this.itemForm.bannedId) {
						this.$message({
							message: "非法操作",
							type: 'warning'
						});
						return;
					}

					bannedState(this.itemForm).then(res => {
						this.$message({
							message: res.message,
							type: 'success'
						});
					}).catch(err => {
						this.$message({
							message: res.message,
							type: 'error'
						});
					})
				} catch (error) {
					//TODO handle the exception
				}
			}),
			/**通过审核*/
			handledPass: debounce(function(status = 4) {
				this.stateData.status = status;
				let obj = {
					stateId: this.stateId,
					status
				}
				setAudit(obj).then(res => {
					this.$message({
						message: res.message,
						type: 'success'
					});
				}).catch(err => {
					this.$message({
						message: res.message,
						type: 'error'
					});
				})
			}),
			//打开用户信息详情页
			handleOpenDetails(otherid) {
				this.$refs["relationshipAddMobile"].initData(true, otherid, this.$store.getters.userlist)
			},
			handledStateMenu(command) {
				if (command == 'del') {
					this.delDialogVisible = true;
				} else if (command == 'edit') {
					this.Visibility = this.stateData.Visibility
					this.upDialogVisible = true;
				} else if (command == 'banned') {
					this.fjDialogVisible = true;
				}
			},
			//修改权限
			handledEdit() {
				let {
					stateId
				} = this.stateData
				StateEdit({
					stateId,
					Visibility: this.Visibility
				}).then(res => {
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
					this.upDialogVisible = false;
					this.isControls = true
				}).catch(err => {
					this.$message({
						type: 'error',
						message: '修改失败'
					});
				})
			},
			handledDelete() {
				Statedel({
					stateIds: [this.stateData.stateId]
				}).then((data) => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.isControls = true
					this.handleClosed()
				})
			},
			/**
			 * 是否显示操作栏
			 */
			handleIsAlike() {
				return this.stateData.fromId == this.storeUserinfo.Id
			},
			/**
			 * 是否显示操作栏 管理员
			 */
			handleIsAlikeAdmin() {
				return this.storeUserinfo.isAdmin == 1
			},
			computedLike(item) {
				return item.islike ? item.like + 1 : item.like
			},
			//点赞
			handledLike(item) {
				item.islike = !!!item.islike
				this.handledRealLike(item)
			},
			//real点赞
			handledRealLike: debounce(function(item) {
				if (item.islike) {
					Statelike({
						stateId: item.stateId,
						code: "+"
					})
				} else {
					Statelike({
						stateId: item.stateId,
						code: "-"
					})
				}
			}, 1000, true),
			//关闭
			handleClosed() {
				// this.$router.go(-1);
				this.$router.push({
					name: "audit",
					params: {
						code: "audit",
						selectValue: this.selectValue
					}
				})
			},
			/**计算缩略图显示的索引*/
			handledIndex(url) {
				try {
					return this.imagesItemPreviewList.indexOf(url)
				} catch (error) {
					return 0
				}
			},
			initdata() {
				let obj = {
					stateId: this.stateId
				}
				this.imagesItemPreviewList = []
				getStateAuditshow(obj).then(res => {
					if (res.data) {
						let item = res.data[0];
						let tags = item.tags ? item.tags.split(",") : []
						item.images = item.images ? JSON.parse(item.images) : []
						for (let i = 0; i < item.images.length; i++) {
							item.images[i].uniqueID = item.images[i].uniqueID || this.uniqueE(8, 16)
							if (item.images[i].type != 'video/mp4') {
								this.imagesItemPreviewList.push(item.images[i].path)
							}
						}
						let itemtags = []
						for (let i = 0; i < tags.length; i++) {
							itemtags[i] = {
								lable: tags[i],
								key: this.uniqueE(8, 16)
							}

						}
						item.tags = itemtags
						item.islike = false
						item.createTime = formatTime(item.createTime)
						item.VisibilityLabel = this.VisibilitysHuixian[item.Visibility - 1] || "err";
						this.stateData = item
					} else {
						this.stateData = {}
					}

				}).catch(err => {
					this.stateData = {}
				})
			},

		},
		watch: {

			storeUserinfo: {
				deep: true, // 深度监听
				immediate: true, // 页面初始化时是否触发回调
				handler: function(value, oldVal) {
					try {
						if (!value.Id || this.$store.getters.isExecute) {
							return
						}



					} catch (e) {
						//TODO handle the exception
					}



				}
			},

		}
	}
</script>

<style scoped>
	/* 返回的按钮 */
	.goBackButtonBox {
		font-size: 24px;
		font-weight: 500;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		padding: 0 20px;
		z-index: 22;
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: left;
		background-color: #fff;
	}

	.goBackButtonBox .item {
		width: 50px;
	}

	.state-tag {
		margin: 2px;
		margin-right: 10px;
	}

	.contentBox {
		width: 100%;
		margin: 30px 0 80px 0;
		padding: 0 5px;
		box-sizing: border-box;
		text-align: left;
		overflow: hidden;
	}

	/*  */
	.stateBox {
		width: calc(100vw - 70px);
	}

	/* 头部 用户名 操作栏 */
	.headerBox {
		display: flex;
		width: calc(100% - 10px);
		height: 30px;
		line-height: 30px;
		justify-content: space-between;
		align-items: center;
	}

	.stateContent {
		width: calc(100% - 30px);
		box-sizing: border-box;
		white-space: pre-line;
	}


	.contentBox .item {
		width: 100%;
		box-shadow: 2px 2px 10px #00aaff;
		margin-bottom: 20px;
	}

	.contentBox :deep(.el-dialog__body) {
		width: auto;
		padding: 2px;
	}

	.editBox :deep(.el-dialog) {
		width: 60% !important;
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 8px;
	}

	/* start */
	.stateImagesBox {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-auto-rows: minmax(148px, 250px);
		/* 设置行高的最小值和最大值 */
		gap: 1px;
		/* 设置网格项之间的间隔 */
	}

	.stateImagesBox .stateImages {
		width: 100%;
		height: 100%;
		padding: 1px;
		box-sizing: border-box;
	}

	.stateImagesBox .stateImages .images-item {
		width: 100%;
		height: 100%;
		object-fit: cover;
		margin: 0;
		padding: 0;
	}

	/* end */

	.shs-like {
		width: 100%;
	}

	/* 查看作者信息 */
	.bottomBox {
		position: fixed;
		bottom: 20px;
		width: calc(100vw - 25px);
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.showAuthor {
		font-size: 12px;
	}

	.examine,
	.showAuthor {
		width: calc((100% - 30px)/3);
		border-radius: 20px;
		background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
	}

	.examine:nth-child(2),
	.examine:nth-child(3) {
		background-image: linear-gradient(120deg, #00aaff 0%, #aaaaff 100%);
	}

	.examine:nth-child(4) {
		background-image: linear-gradient(120deg, #b4b4b4 0%, #d4d4d4 100%);
	}

	/* 违规词检测 */
	.sensitiveState {
		width: 100px;
		height: 65px;
		right: 15px;
		bottom: 100px;
		position: fixed;
		margin: 0 auto;
		display: flex;
		font-size: 16px;
		justify-content: center;
		align-items: center;
		color: #ffff00;
		border-radius: 33px;
		background-color: #ff3336;
	}
</style>